<template>
  <view class="container">
    <!-- 第一步：顶部筛选区域 - 优化版 -->
   12312312321312
    <!-- 添加底部安全区域占位 -->
    <view class="tabbar-placeholder"></view>
    
    <!-- 使用自定义 TabBar 组件 -->
    <cc-myTabbar :tabBarShow="1"></cc-myTabbar>
  </view>
</template>

<script>
import { qrcode, coach, edit_info, getUserInfo } from "../../api/fit";

export default {

  data() {
    return {
      baseList: [
        {
          name: "photo",
          title: "图片",
        },
        {
          name: "lock",
          title: "锁头",
        },
      ],
      participants:[
        {gender:'男'},
        {gender:'男'},
        {gender:'男'},
        {gender:'男'},
        
      ],
      logoSrc: "",
      showModal: false,
      qrCodeUrl: "",
      role: "",
      planName: "",
      userName: "",
      coachPlan: {
        planCount: 0,
        physicalFitnessCount: 0,
      },
      dataList: [],
      unitOptions: [
        { label: "次", value: "c" },
        { label: "秒", value: "s" },
        { label: "分", value: "m" },
      ],
      avatarUrl: "",
      isEditing: false,
      // TabBar 相关数据
      currentTabIndex: 0,
      tabBarItems: [
        { icon: '🏠', text: '首页', url: '/pages/index/index' },
        { icon: '🔍', text: '分类', url: '/pages/category/index' },
        { icon: '+', text: '发布', url: '' },
        { icon: '💬', text: '消息', url: '/pages/message/index' },
        { icon: '👤', text: '我的', url: '/pages/user/index' }
      ],
      
      // 筛选区域数据
      searchText: "",
      dateRangeText: "选择日期",
      selectedCitiesText: "选择城市",
      filterTags: [],
      
      // 日期选择器数据
      showDatePicker: false,
      dateShortcuts: [
        { text: "今日", value: "today" },
        { text: "明日", value: "tomorrow" },
        { text: "本周", value: "thisWeek" },
        { text: "下周", value: "nextWeek" }
      ],
      selectedShortcut: -1,
      datePickerValue: [0, 0, 0],
      years: [],
      months: [],
      days: [],
      selectedDate: null,
      
      // 城市选择器数据
      showCityPicker: false,
      hotCities: ["北京", "上海", "广州", "深圳", "杭州", "成都", "重庆", "南京"],
      selectedCities: [],
      cityGroups: {
        "A": ["安徽", "鞍山"],
        "B": ["北京", "保定", "包头"],
        "C": ["重庆", "成都", "长沙", "常州"],
        "D": ["大连", "东莞", "大庆"],
        "F": ["福州", "佛山"],
        "G": ["广州", "贵阳"],
        "H": ["杭州", "合肥", "哈尔滨", "海口"],
        "J": ["济南", "嘉兴", "金华"],
        "K": ["昆明"],
        "L": ["兰州", "洛阳"],
        "N": ["南京", "宁波", "南昌", "南宁"],
        "Q": ["青岛", "泉州"],
        "S": ["上海", "深圳", "苏州", "沈阳", "石家庄"],
        "T": ["天津", "太原"],
        "W": ["武汉", "无锡", "温州"],
        "X": ["西安", "厦门", "徐州"],
        "Y": ["烟台", "扬州"],
        "Z": ["郑州", "珠海", "中山"]
      },
      
      // 轮播相关数据
      carouselItems: [
        {
          id: 1,
          title: "2023夏日音乐节",
          description: "与顶级艺术家一起度过难忘的夏日夜晚",
          image: "https://picsum.photos/id/1/800/450",
          date: "2023-07-15",
          location: "上海体育场",
          price: 299,
          originalPrice: 399,
          isHot: true,
          isRecommended: false
        },
        {
          id: 2,
          title: "国际美食节",
          description: "品尝来自世界各地的美食",
          image: "https://picsum.photos/id/2/800/450",
          date: "2023-08-05",
          location: "北京国家会展中心",
          price: 188,
          originalPrice: 258,
          isHot: false,
          isRecommended: true
        },
        {
          id: 3,
          title: "科技创新展",
          description: "探索未来科技的无限可能",
          image: "https://picsum.photos/id/3/800/450",
          date: "2023-09-10",
          location: "深圳会展中心",
          price: 120,
          originalPrice: 150,
          isHot: true,
          isRecommended: true
        },
        {
          id: 4,
          title: "瑜伽与冥想工作坊",
          description: "找回内心的平静与和谐",
          image: "https://picsum.photos/id/4/800/450",
          date: "2023-07-22",
          location: "杭州西湖文化中心",
          price: 99,
          originalPrice: 0,
          isHot: false,
          isRecommended: false
        },
        {
          id: 5,
          title: "古典音乐会",
          description: "聆听贝多芬的不朽名作",
          image: "https://picsum.photos/id/5/800/450",
          date: "2023-08-15",
          location: "广州大剧院",
          price: 280,
          originalPrice: 380,
          isHot: false,
          isRecommended: true
        }
      ],
      currentIndex: 0,
      isPaused: false,
      swiperMargin: "60rpx",
      thumbnailScrollLeft: 0,
      transitionProgress: 0,
      touchStartX: 0,
      
      // 拼团相关数据
      currentGroupTab: 0,
      groupTabs: [
        { text: '全部', value: 'all' },
        { text: '可参与', value: 'available' },
        { text: '即将截止', value: 'ending' },
        { text: '满员', value: 'full' }
      ],
      groupBuyingList: [
        {
          id: 1,
          title: "韩国首尔3日游",
          location: "首尔",
          date: new Date(2023, 6, 15),
          startTime: "09:00",
          endTime: "18:00",
          image: "https://picsum.photos/id/10/200/200",
          groupPrice: 1999,
          originalPrice: 2999,
          requiredMembers: 5,
          members: [
            { id: 1, name: "张三", avatar: "https://picsum.photos/id/1001/100/100" },
            { id: 2, name: "李四", avatar: "https://picsum.photos/id/1002/100/100" },
            { id: 3, name: "王五", avatar: "https://picsum.photos/id/1003/100/100" }
          ],
          deadline: new Date(2023, 6, 15, 23, 59, 59)
        },
        {
          id: 2,
          title: "济州岛一日游",
          location: "济州岛",
          date: new Date(2023, 6, 15),
          startTime: "08:30",
          endTime: "17:30",
          image: "https://picsum.photos/id/11/200/200",
          groupPrice: 899,
          originalPrice: 1299,
          requiredMembers: 8,
          members: [
            { id: 4, name: "赵六", avatar: "https://picsum.photos/id/1004/100/100" },
            { id: 5, name: "钱七", avatar: "https://picsum.photos/id/1005/100/100" }
          ],
          deadline: new Date(2023, 6, 16, 12, 0, 0)
        },
        {
          id: 3,
          title: "釜山海鲜美食之旅",
          location: "釜山",
          date: new Date(2023, 6, 16),
          startTime: "10:00",
          endTime: "20:00",
          image: "https://picsum.photos/id/12/200/200",
          groupPrice: 1299,
          originalPrice: 1699,
          requiredMembers: 6,
          members: [
            { id: 6, name: "孙八", avatar: "https://picsum.photos/id/1006/100/100" },
            { id: 7, name: "周九", avatar: "https://picsum.photos/id/1007/100/100" },
            { id: 8, name: "吴十", avatar: "https://picsum.photos/id/1008/100/100" },
            { id: 9, name: "郑十一", avatar: "https://picsum.photos/id/1009/100/100" },
            { id: 10, name: "王十二", avatar: "https://picsum.photos/id/1010/100/100" }
          ],
          deadline: new Date(2023, 6, 17, 20, 0, 0)
        },
        {
          id: 4,
          title: "南山塔夜景游",
          location: "首尔",
          date: new Date(2023, 6, 17),
          startTime: "18:00",
          endTime: "22:00",
          image: "https://picsum.photos/id/13/200/200",
          groupPrice: 599,
          originalPrice: 799,
          requiredMembers: 10,
          members: [
            { id: 11, name: "刘一", avatar: "https://picsum.photos/id/1011/100/100" },
            { id: 12, name: "陈二", avatar: "https://picsum.photos/id/1012/100/100" }
          ],
          deadline: new Date(2023, 6, 18, 18, 0, 0)
        },
        {
          id: 5,
          title: "韩国传统文化体验",
          location: "全州",
          date: new Date(2023, 6, 18),
          startTime: "09:30",
          endTime: "16:30",
          image: "https://picsum.photos/id/14/200/200",
          groupPrice: 799,
          originalPrice: 999,
          requiredMembers: 8,
          members: [
            { id: 13, name: "林三", avatar: "https://picsum.photos/id/1013/100/100" },
            { id: 14, name: "黄四", avatar: "https://picsum.photos/id/1014/100/100" },
            { id: 15, name: "张五", avatar: "https://picsum.photos/id/1015/100/100" },
            { id: 16, name: "李六", avatar: "https://picsum.photos/id/1016/100/100" },
            { id: 17, name: "王七", avatar: "https://picsum.photos/id/1017/100/100" },
            { id: 18, name: "赵八", avatar: "https://picsum.photos/id/1018/100/100" },
            { id: 19, name: "钱九", avatar: "https://picsum.photos/id/1019/100/100" }
          ],
          deadline: new Date(2023, 6, 19, 9, 0, 0)
        }
      ],
      countdownTimer: null,
      // 列表相关数据
      viewMode: 'list', // list 或 grid
      showSortOptions: false,
      currentSort: 'recommended',
      sortOptions: [
        { text: '推荐排序', value: 'recommended' },
        { text: '价格从低到高', value: 'priceAsc' },
        { text: '价格从高到低', value: 'priceDesc' },
        { text: '日期最近', value: 'dateAsc' },
        { text: '热度最高', value: 'hotDesc' }
      ],
      listItems: [], // 所有项目
      page: 1,
      pageSize: 10,
      isLoading: false,
      isAllLoaded: false
    };
  },

  created() {
    this.initDatePicker();
    // 模拟初始加载
    this.loadItems();
    
    // 添加滚动监听
    uni.$on('onReachBottom', this.onReachBottom);
  },

  computed: {
    filteredGroups() {
      let result = [...this.groupBuyingList];
      
      // 根据标签筛选
      if (this.currentGroupTab !== 0) {
        const filterType = this.groupTabs[this.currentGroupTab].value;
        
        switch (filterType) {
          case 'available':
            result = result.filter(group => 
              group.members.length < group.requiredMembers && 
              new Date(group.deadline) > new Date()
            );
            break;
          case 'ending':
            const now = new Date();
            const oneDayLater = new Date(now.getTime() + 24 * 60 * 60 * 1000);
            result = result.filter(group => 
              new Date(group.deadline) > now && 
              new Date(group.deadline) < oneDayLater
            );
            break;
          case 'full':
            result = result.filter(group => 
              group.members.length >= group.requiredMembers
            );
            break;
        }
      }
      
      // 按截止时间排序
      result.sort((a, b) => new Date(a.deadline) - new Date(b.deadline));
      
      return result;
    },
    currentSortText() {
      const option = this.sortOptions.find(opt => opt.value === this.currentSort);
      return option ? option.text : '推荐排序';
    },
    displayedItems() {
      let items = [...this.listItems];
      
      // 根据排序方式排序
      switch (this.currentSort) {
        case 'priceAsc':
          items.sort((a, b) => a.groupPrice - b.groupPrice);
          break;
        case 'priceDesc':
          items.sort((a, b) => b.groupPrice - a.groupPrice);
          break;
        case 'dateAsc':
          items.sort((a, b) => new Date(a.date) - new Date(b.date));
          break;
        case 'hotDesc':
          items.sort((a, b) => b.viewCount - a.viewCount);
          break;
        // 推荐排序可能是基于多个因素的复杂排序，这里简化处理
        default:
          break;
      }
      
      return items;
    }
  },

  mounted() {
    // 启动倒计时定时器
    this.countdownTimer = setInterval(() => {
      this.$forceUpdate(); // 强制更新视图以刷新倒计时
    }, 1000);
  },

  beforeDestroy() {
    // 清除定时器
    if (this.countdownTimer) {
      clearInterval(this.countdownTimer);
    }
    // 移除事件监听
    uni.$off('onReachBottom', this.onReachBottom);
  },

  methods: {
    // 筛选区域方法
    handleSearch() {
      if (!this.searchText) return;
      
      this.addFilterTag('search', this.searchText);
      // 这里可以添加搜索逻辑
    },
    
    clearSearch() {
      this.searchText = "";
      this.removeTagByType('search');
    },
    
    addFilterTag(type, text) {
      // 先移除同类型的标签
      this.removeTagByType(type);
      
      // 添加新标签
      this.filterTags.push({ type, text });
    },
    
    removeTag(index) {
      const tag = this.filterTags[index];
      
      if (tag.type === 'search') {
        this.searchText = "";
      } else if (tag.type === 'date') {
        this.dateRangeText = "选择日期";
      } else if (tag.type === 'city') {
        this.selectedCities = [];
        this.selectedCitiesText = "选择城市";
      }
      
      this.filterTags.splice(index, 1);
    },
    
    removeTagByType(type) {
      const index = this.filterTags.findIndex(tag => tag.type === type);
      if (index !== -1) {
        this.filterTags.splice(index, 1);
      }
    },
    
    clearAllFilters() {
      this.searchText = "";
      this.dateRangeText = "选择日期";
      this.selectedCities = [];
      this.selectedCitiesText = "选择城市";
      this.filterTags = [];
    },
    
    // 日期选择器方法
    initDatePicker() {
      const currentDate = new Date();
      const currentYear = currentDate.getFullYear();
      
      // 生成年份列表（前后10年）
      this.years = Array.from({length: 21}, (_, i) => currentYear - 10 + i);
      
      // 生成月份列表
      this.months = Array.from({length: 12}, (_, i) => i + 1);
      
      // 生成天数列表（默认31天）
      this.updateDays(currentYear, currentDate.getMonth() + 1);
      
      // 设置默认值为当前日期
      this.datePickerValue = [
        10, // 当前年份在列表中的索引
        currentDate.getMonth(),
        currentDate.getDate() - 1
      ];
      
      this.selectedDate = currentDate;
    },
    
    updateDays(year, month) {
      const daysInMonth = new Date(year, month, 0).getDate();
      this.days = Array.from({length: daysInMonth}, (_, i) => i + 1);
    },
    
    onDatePickerChange(e) {
      const values = e.detail.value;
      this.datePickerValue = values;
      
      const year = this.years[values[0]];
      const month = this.months[values[1]];
      
      // 更新天数列表
      this.updateDays(year, month);
      
      // 如果选择的天数超出了当月的最大天数，则调整为当月最后一天
      if (values[2] >= this.days.length) {
        this.datePickerValue[2] = this.days.length - 1;
      }
      
      // 更新选中的日期
      this.selectedDate = new Date(year, month - 1, this.days[this.datePickerValue[2]]);
    },
    
    selectDateShortcut(index) {
      this.selectedShortcut = index;
      
      const today = new Date();
      const shortcut = this.dateShortcuts[index].value;
      
      if (shortcut === 'today') {
        this.selectedDate = today;
      } else if (shortcut === 'tomorrow') {
        const tomorrow = new Date(today);
        tomorrow.setDate(today.getDate() + 1);
        this.selectedDate = tomorrow;
      } else if (shortcut === 'thisWeek') {
        // 本周的日期范围
        const dayOfWeek = today.getDay();
        const diff = today.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1);
        const startOfWeek = new Date(today.setDate(diff));
        this.selectedDate = startOfWeek;
      } else if (shortcut === 'nextWeek') {
        // 下周的日期范围
        const dayOfWeek = today.getDay();
        const diff = today.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1) + 7;
        const startOfNextWeek = new Date(today.setDate(diff));
        this.selectedDate = startOfNextWeek;
      }
      
      // 更新日期选择器的值
      const year = this.selectedDate.getFullYear();
      const month = this.selectedDate.getMonth() + 1;
      const day = this.selectedDate.getDate();
      
      const yearIndex = this.years.findIndex(y => y === year);
      const monthIndex = month - 1;
      const dayIndex = day - 1;
      
      this.datePickerValue = [yearIndex, monthIndex, dayIndex];
    },
    
    confirmDateSelection() {
      if (!this.selectedDate) return;
      
      const year = this.selectedDate.getFullYear();
      const month = this.selectedDate.getMonth() + 1;
      const day = this.selectedDate.getDate();
      
      let dateText = '';
      
      if (this.selectedShortcut !== -1) {
        dateText = this.dateShortcuts[this.selectedShortcut].text;
      } else {
        dateText = `${month}月${day}日`;
      }
      
      this.dateRangeText = dateText;
      this.addFilterTag('date', dateText);
      this.showDatePicker = false;
    },
    
    // 城市选择器方法
    isSelectedCity(city) {
      return this.selectedCities.includes(city);
    },
    
    toggleCity(city) {
      const index = this.selectedCities.indexOf(city);
      if (index === -1) {
        this.selectedCities.push(city);
      } else {
        this.selectedCities.splice(index, 1);
      }
    },
    
    removeCity(index) {
      this.selectedCities.splice(index, 1);
    },
    
    confirmCitySelection() {
      if (this.selectedCities.length === 0) {
        this.selectedCitiesText = "选择城市";
      } else if (this.selectedCities.length === 1) {
        this.selectedCitiesText = this.selectedCities[0];
      } else {
        this.selectedCitiesText = `${this.selectedCities[0]}等${this.selectedCities.length}个城市`;
      }
      
      if (this.selectedCities.length > 0) {
        this.addFilterTag('city', this.selectedCitiesText);
      } else {
        this.removeTagByType('city');
      }
      
      this.showCityPicker = false;
    },
    
    // 轮播相关方法
    onSwiperChange(e) {
      this.currentIndex = e.detail.current;
      this.updateThumbnailScroll();
    },
    
    onSwiperTransition(e) {
      this.transitionProgress = e.detail.dx / e.detail.width;
    },
    
    setCurrentIndex(index) {
      this.currentIndex = index;
    },
    
    toggleAutoplay() {
      this.isPaused = !this.isPaused;
    },
    
    onCardTap(item, index) {
      // 点击卡片时的处理
      uni.navigateTo({
        url: `/pages/activity/detail?id=${item.id}`
      });
    },
    
    getTransform(index) {
      // 计算3D变换效果
      const diff = index - this.currentIndex;
      if (diff === 0) {
        return 'scale(1) translateZ(0)';
      } else {
        const scale = 0.85;
        const rotate = diff > 0 ? 5 : -5;
        return `scale(${scale}) rotateY(${rotate}deg) translateZ(-100rpx)`;
      }
    },
    
    updateThumbnailScroll() {
      // 计算缩略图滚动位置
      const itemWidth = 140; // 缩略图宽度 + 间距
      this.thumbnailScrollLeft = (this.currentIndex - 1) * itemWidth;
      if (this.thumbnailScrollLeft < 0) this.thumbnailScrollLeft = 0;
    },
    
    onThumbnailScroll(e) {
      // 缩略图滚动事件处理
    },
    
    // 拼团相关方法
    switchGroupTab(index) {
      this.currentGroupTab = index;
    },
    
    formatDay(date) {
      return date.getDate();
    },
    
    formatMonth(date) {
      const months = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
      return months[date.getMonth()].substring(0, 1) + '月';
    },
    
    formatWeekday(date) {
      const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
      return weekdays[date.getDay()];
    },
    
    formatTime(timeString) {
      return timeString;
    },
    
    calculateDiscount(groupPrice, originalPrice) {
      return Math.floor(groupPrice / originalPrice * 10);
    },
    
    calculateProgress(current, total) {
      return Math.min(100, Math.round(current / total * 100));
    },
    
    formatCountdown(deadline) {
      const now = new Date();
      const diff = new Date(deadline) - now;
      
      if (diff <= 0) {
        return '已结束';
      }
      
      const days = Math.floor(diff / (1000 * 60 * 60 * 24));
      const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((diff % (1000 * 60)) / 1000);
      
      if (days > 0) {
        return `${days}天${hours}小时`;
      } else if (hours > 0) {
        return `${hours}小时${minutes}分钟`;
      } else {
        return `${minutes}分钟${seconds}秒`;
      }
    },
    
    joinGroup(groupId) {
      // 加入拼团逻辑
      uni.showToast({
        title: '已加入拼团',
        icon: 'success'
      });
    },
    
    shareGroup(groupId) {
      // 分享拼团逻辑
      uni.showShareMenu({
        withShareTicket: true,
        success() {
          console.log('打开分享菜单成功');
        },
        fail() {
          console.log('打开分享菜单失败');
        }
      });
    },
    
    // 视图和排序方法
    changeViewMode(mode) {
      this.viewMode = mode;
      // 保存用户偏好
      uni.setStorageSync('viewMode', mode);
    },
    
    setSortOption(option) {
      this.currentSort = option;
      this.showSortOptions = false;
    },
    
    // 加载数据
    loadItems() {
      if (this.isLoading || this.isAllLoaded) return;
      
      this.isLoading = true;
      
      // 模拟网络请求
      setTimeout(() => {
        const newItems = this.generateMockItems();
        
        if (newItems.length === 0) {
          this.isAllLoaded = true;
        } else {
          this.listItems = [...this.listItems, ...newItems];
          this.page++;
        }
        
        this.isLoading = false;
      }, 1000);
    },
    
    loadMore() {
      this.loadItems();
    },
    
    onReachBottom() {
      // 当页面滚动到底部时自动加载更多
      if (!this.isLoading && !this.isAllLoaded) {
        this.loadItems();
      }
    },
    
    // 收藏功能
    toggleFavorite(index) {
      this.listItems[index].isFavorite = !this.listItems[index].isFavorite;
      
      // 提示收藏状态
      uni.showToast({
        title: this.listItems[index].isFavorite ? '已收藏' : '已取消收藏',
        icon: 'none'
      });
    },
    
    // 跳转到详情页
    navigateToDetail(id) {
      uni.navigateTo({
        url: `/pages/detail/index?id=${id}`
      });
    },
    
    // 生成模拟数据
    generateMockItems() {
      // 如果页码大于5，则不再生成数据，模拟全部加载完毕
      if (this.page > 5) return [];
      
      const items = [];
      const startIndex = (this.page - 1) * this.pageSize;
      
      for (let i = 0; i < this.pageSize; i++) {
        const id = startIndex + i + 1;
        items.push({
          id,
          title: `韩国旅游项目 ${id}`,
          image: `https://picsum.photos/id/${(id % 30) + 10}/400/300`,
          date: this.getRandomDate(),
          location: this.getRandomLocation(),
          groupPrice: Math.floor(Math.random() * 2000) + 1000,
          originalPrice: Math.floor(Math.random() * 3000) + 2000,
          groupCount: Math.floor(Math.random() * 20) + 1,
          remainingSlots: Math.floor(Math.random() * 10) + 1,
          viewCount: Math.floor(Math.random() * 1000) + 100,
          isHot: Math.random() > 0.7,
          isFavorite: Math.random() > 0.8
        });
      }
      
      return items;
    },
    
    getRandomDate() {
      const startDate = new Date();
      const endDate = new Date();
      endDate.setMonth(endDate.getMonth() + 3);
      
      const randomDate = new Date(
        startDate.getTime() + Math.random() * (endDate.getTime() - startDate.getTime())
      );
      
      return randomDate.toISOString().split('T')[0];
    },
    
    getRandomLocation() {
      const locations = ['首尔', '釜山', '济州岛', '大邱', '仁川', '光州'];
      return locations[Math.floor(Math.random() * locations.length)];
    }
  },
};
</script>

<style lang="scss">
.container {
  padding: 20rpx;
  padding-bottom: 0; /* 移除底部内边距，由占位元素提供 */
  background-color: #f2f2f7;
  min-height: 100vh;
  box-sizing: border-box;
  position: relative;
  z-index: 1; /* 确保内容在正常层级 */
}

/* 顶部筛选区域样式 - 优化版 */
.filter-section {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

/* 搜索框样式 */
.search-box {
  width: 100%;
  margin-bottom: 20rpx;
}

.search-input-wrapper {
  display: flex;
  align-items: center;
  background-color: #f2f2f7;
  border-radius: 10rpx;
  padding: 10rpx 20rpx;
  height: 70rpx;
}

.search-icon {
  font-size: 32rpx;
  color: #8e8e93;
  margin-right: 10rpx;
}

input {
  flex: 1;
  height: 100%;
  font-size: 28rpx;
  color: #000;
}

.clear-btn {
  font-size: 36rpx;
  color: #8e8e93;
  padding: 0 10rpx;
}

/* 筛选按钮区域 */
.filter-buttons {
  display: flex;
  justify-content: space-between;
}

.filter-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f2f2f7;
  border-radius: 10rpx;
  padding: 15rpx 20rpx;
  width: 48%;
  height: 70rpx;
}

.date-icon, .city-icon {
  font-size: 32rpx;
  margin-right: 10rpx;
}

.filter-text {
  font-size: 28rpx;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80%;
}

/* 已选筛选条件展示样式 */
.selected-filters {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.filter-tags {
  flex: 1;
  white-space: nowrap;
  height: 60rpx;
}

.tag {
  display: inline-flex;
  align-items: center;
  background-color: #e5f1ff;
  border-radius: 30rpx;
  padding: 8rpx 20rpx;
  margin-right: 16rpx;
  font-size: 24rpx;
  color: #007aff;
}

.tag-close {
  margin-left: 10rpx;
  font-size: 28rpx;
  color: #007aff;
}

.clear-all {
  font-size: 28rpx;
  color: #007aff;
  padding: 10rpx;
}

/* 弹窗样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  width: 90%;
  max-height: 80vh;
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #e5e5e5;
}

.modal-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #000;
}

.close-btn {
  font-size: 32rpx;
  color: #007aff;
}

/* 日期选择器样式 */
.date-shortcuts {
  display: flex;
  padding: 20rpx;
  border-bottom: 1rpx solid #e5e5e5;
  flex-wrap: wrap;
}

.shortcut-btn {
  padding: 10rpx 20rpx;
  margin-right: 20rpx;
  margin-bottom: 10rpx;
  border-radius: 30rpx;
  font-size: 28rpx;
  color: #007aff;
  background-color: #f2f2f7;
}

.shortcut-btn.active {
  background-color: #007aff;
  color: #fff;
}

.calendar-view {
  flex: 1;
  padding: 20rpx;
  overflow-y: auto;
}

.date-picker-view {
  width: 100%;
  height: 400rpx;
}

.picker-item {
  line-height: 80rpx;
  text-align: center;
}

/* 城市选择器样式 */
.hot-cities, .all-cities, .selected-cities {
  padding: 20rpx;
}

.section-label {
  font-size: 28rpx;
  color: #8e8e93;
  margin-bottom: 20rpx;
  display: block;
}

.city-tags {
  display: flex;
  flex-wrap: wrap;
}

.city-tag, .selected-tag {
  padding: 10rpx 20rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
  border-radius: 30rpx;
  font-size: 28rpx;
  color: #000;
  background-color: #f2f2f7;
}

.city-tag.active {
  background-color: #007aff;
  color: #fff;
}

.selected-tag {
  display: flex;
  align-items: center;
  background-color: #e5f1ff;
  color: #007aff;
}

.city-list {
  max-height: 400rpx;
  overflow-y: auto;
}

.city-group {
  margin-bottom: 30rpx;
}

.group-label {
  font-size: 32rpx;
  font-weight: 500;
  color: #000;
  margin-bottom: 20rpx;
  display: block;
}

.group-cities {
  display: flex;
  flex-wrap: wrap;
}

.city-item {
  width: 25%;
  padding: 16rpx 0;
  font-size: 28rpx;
  color: #000;
  text-align: center;
}

.city-item.active {
  color: #007aff;
  font-weight: 500;
}

.modal-footer {
  padding: 20rpx;
  border-top: 1rpx solid #e5e5e5;
}

.confirm-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background-color: #007aff;
  color: #fff;
  border-radius: 40rpx;
  font-size: 32rpx;
}

/* TabBar 占位区域 */
.tabbar-placeholder {
  height: 110rpx;
  width: 100%;
  clear: both; /* 确保占位元素不被浮动元素影响 */
}

/* 适配 iPhone X 及以上机型底部安全区域 */
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
  .tabbar-placeholder {
    height: calc(110rpx + constant(safe-area-inset-bottom));
    height: calc(110rpx + env(safe-area-inset-bottom));
  }
}

/* 轮播区域样式 */
.carousel-section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #000;
}

.carousel-controls {
  display: flex;
  align-items: center;
}

.control-dot {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background-color: #f2f2f7;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 20rpx;
}

.control-dot.active {
  background-color: #007aff;
}

.control-icon {
  font-size: 24rpx;
  color: #333;
}

.control-dot.active .control-icon {
  color: #fff;
}

.carousel-container {
  position: relative;
  height: 500rpx;
  overflow: hidden;
}

.carousel-swiper {
  height: 100%;
  width: 100%;
}

.swiper-item {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
}

.carousel-card {
  width: 90%;
  height: 450rpx;
  border-radius: 16rpx;
  overflow: hidden;
  position: relative;
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  transform-origin: center center;
  transform: scale(0.85) translateZ(-100rpx);
  perspective: 1000rpx;
}

.carousel-card.active {
  transform: scale(1) translateZ(0);
  box-shadow: 0 15rpx 30rpx rgba(0, 0, 0, 0.2);
}

.carousel-image {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.carousel-tag {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  background-color: #ff3b30;
  color: #fff;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: 500;
  z-index: 3;
}

.carousel-tag.recommend {
  background-color: #34c759;
  right: 120rpx;
}

.carousel-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30rpx;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  z-index: 2;
  color: #fff;
}

.carousel-title {
  font-size: 32rpx;
  font-weight: 600;
  margin-bottom: 10rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.carousel-meta {
  display: flex;
  margin-bottom: 10rpx;
}

.meta-item {
  display: flex;
  align-items: center;
  margin-right: 20rpx;
  font-size: 24rpx;
}

.meta-icon {
  margin-right: 6rpx;
  font-size: 24rpx;
}

.carousel-price {
  display: flex;
  align-items: baseline;
}

.price-label {
  font-size: 24rpx;
}

.price-value {
  font-size: 36rpx;
  font-weight: 600;
  margin-right: 10rpx;
}

.price-original {
  font-size: 24rpx;
  text-decoration: line-through;
  opacity: 0.7;
}

.carousel-indicators {
  display: flex;
  justify-content: center;
  margin-top: 20rpx;
}

.indicator-dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background-color: #d1d1d6;
  margin: 0 8rpx;
  transition: all 0.3s ease;
}

.indicator-dot.active {
  width: 32rpx;
  border-radius: 8rpx;
  background-color: #007aff;
}

.carousel-thumbnails {
  margin-top: 20rpx;
  white-space: nowrap;
  height: 120rpx;
}

.thumbnail-item {
  display: inline-block;
  width: 120rpx;
  height: 80rpx;
  margin-right: 20rpx;
  border-radius: 8rpx;
  overflow: hidden;
  opacity: 0.6;
  transition: all 0.3s ease;
}

.thumbnail-item.active {
  opacity: 1;
  transform: scale(1.1);
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
}

.thumbnail-item image {
  width: 100%;
  height: 100%;
}

/* 拼团区域样式 - 优化版 */
.group-buying-section {
  margin-top: 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #000;
}

/* 优化的筛选标签样式 */
.group-filter-tabs {
  margin-bottom: 30rpx;
  position: relative;
}

.group-filter-tabs::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1rpx;
  background-color: #e5e5ea;
}

.tabs-scroll {
  white-space: nowrap;
  height: 80rpx;
}

.filter-tab-item {
  display: inline-block;
  padding: 0 30rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 28rpx;
  color: #8e8e93;
  position: relative;
  transition: all 0.3s;
}

.filter-tab-item.active {
  color: #007aff;
  font-weight: 500;
}

.filter-tab-item.active::after {
  content: '';
  position: absolute;
  left: 30rpx;
  right: 30rpx;
  bottom: 0;
  height: 4rpx;
  background-color: #007aff;
  border-radius: 2rpx;
}

/* 拼团列表样式保持不变 */
.group-list {
  padding: 10rpx 0;
}

.group-item {
  padding: 30rpx;
  margin-bottom: 30rpx;
  border-radius: 16rpx;
  background-color: #f9f9f9;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.group-info {
  display: flex;
  margin-bottom: 20rpx;
}

.group-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 12rpx;
  margin-right: 20rpx;
}

.group-details {
  flex: 1;
}

.group-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #000;
  margin-bottom: 10rpx;
}

.group-location, .group-time {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #8e8e93;
  margin-bottom: 8rpx;
}

.location-icon, .time-icon {
  margin-right: 8rpx;
  font-size: 26rpx;
}

.group-price {
  display: flex;
  align-items: center;
  margin-top: 10rpx;
}

.group-price-value {
  font-size: 36rpx;
  font-weight: 600;
  color: #ff3b30;
}

.group-original-price {
  font-size: 26rpx;
  color: #8e8e93;
  text-decoration: line-through;
  margin: 0 10rpx;
}

.group-discount {
  font-size: 24rpx;
  color: #fff;
  background-color: #ff3b30;
  padding: 4rpx 10rpx;
  border-radius: 10rpx;
}

.group-progress-container {
  margin-bottom: 20rpx;
}

.group-members {
  display: flex;
  align-items: center;
  margin-bottom: 15rpx;
}

.member-avatars {
  display: flex;
  margin-right: 15rpx;
}

.member-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  border: 2rpx solid #fff;
  margin-right: -15rpx;
}

.member-count {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background-color: #f2f2f7;
  color: #8e8e93;
  font-size: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 5rpx;
}

.member-status {
  font-size: 26rpx;
  color: #8e8e93;
}

.group-progress {
  height: 10rpx;
  background-color: #e5e5ea;
  border-radius: 5rpx;
  overflow: hidden;
  margin-bottom: 15rpx;
}

.progress-bar {
  height: 100%;
  background-color: #34c759;
  border-radius: 5rpx;
}

.group-deadline {
  display: flex;
  justify-content: flex-end;
  font-size: 26rpx;
}

.deadline-label {
  color: #8e8e93;
}

.deadline-time {
  color: #ff3b30;
  font-weight: 500;
  margin-left: 10rpx;
}

.group-actions {
  display: flex;
}

.join-btn {
  flex: 3;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #ff9500;
  color: #fff;
  font-size: 30rpx;
  font-weight: 500;
  border-radius: 40rpx;
  margin-right: 20rpx;
}

.share-btn {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #f2f2f7;
  color: #007aff;
  font-size: 30rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.share-icon {
  margin-right: 8rpx;
}

.empty-tip {
  padding: 60rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.empty-icon {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 20rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #8e8e93;
}

/* 列表展示区域样式 */
.list-section {
  margin-top: 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.list-tools {
  display: flex;
  align-items: center;
}

.view-toggle {
  display: flex;
  border: 1rpx solid #e5e5ea;
  border-radius: 8rpx;
  overflow: hidden;
  margin-right: 20rpx;
}

.toggle-btn {
  width: 80rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f2f2f7;
}

.toggle-btn.active {
  background-color: #007aff;
  color: #fff;
}

.toggle-icon {
  font-size: 32rpx;
}

.sort-dropdown {
  position: relative;
  font-size: 28rpx;
  color: #8e8e93;
  padding: 10rpx 20rpx;
  background-color: #f2f2f7;
  border-radius: 30rpx;
  display: flex;
  align-items: center;
}

.dropdown-icon {
  font-size: 24rpx;
  margin-left: 10rpx;
}

.sort-options {
  position: absolute;
  top: 70rpx;
  right: 0;
  width: 240rpx;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.sort-option {
  padding: 20rpx;
  font-size: 28rpx;
  color: #333;
  border-bottom: 1rpx solid #f2f2f7;
}

.sort-option.active {
  color: #007aff;
  font-weight: 500;
}

.sort-option:last-child {
  border-bottom: none;
}

/* 列表/网格视图样式优化 */
.item-container {
  margin-top: 20rpx;
}

.grid-view {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item-card {
  position: relative;
  margin-bottom: 30rpx;
  overflow: hidden;
  transition: all 0.3s ease;
}

.list-item {
  display: flex;
  background-color: #f9f9f9;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  width: 100%;
}

.grid-item {
  width: 48%;
  border-radius: 16rpx;
  background-color: #f9f9f9;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
}

/* 图片样式优化 */
.list-item .item-image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 12rpx;
  flex-shrink: 0;
}

.grid-item .item-image {
  width: 100%;
  height: 300rpx;
  border-radius: 16rpx 16rpx 0 0;
}

/* 收藏按钮位置调整 */
.list-item .favorite-btn {
  top: 10rpx;
  right: 10rpx;
}

.grid-item .favorite-btn {
  top: 10rpx;
  right: 10rpx;
}

/* 信息区域布局优化 */
.list-item .item-info {
  flex: 1;
  padding: 0 0 0 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.grid-item .item-info {
  padding: 20rpx;
  height: 200rpx;
  justify-content: space-between;
}

/* 标题样式优化 */
.list-item .item-title {
  font-size: 28rpx;
  font-weight: 600;
  margin-bottom: 10rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80%;
}

.grid-item .item-title {
  font-size: 28rpx;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

/* 元数据区域优化 */
.list-item .item-meta {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10rpx;
}

.grid-item .item-meta {
  display: flex;
  flex-direction: column;
  margin-bottom: 10rpx;
}

.list-item .meta-item {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #8e8e93;
  margin-right: 20rpx;
  margin-bottom: 6rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.grid-item .meta-item {
  display: flex;
  align-items: center;
  font-size: 22rpx;
  color: #8e8e93;
  margin-bottom: 6rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

/* 状态信息区域优化 */
.list-item .item-status {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.grid-item .item-status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.list-item .group-status {
  font-size: 22rpx;
  color: #8e8e93;
  display: flex;
  align-items: center;
}

.grid-item .group-status {
  font-size: 20rpx;
  color: #8e8e93;
  margin-bottom: 8rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

/* 价格样式优化 */
.list-item .item-price {
  display: flex;
  align-items: baseline;
  flex-shrink: 0;
}

.grid-item .item-price {
  display: flex;
  align-items: baseline;
  margin-top: 6rpx;
}

.price-current {
  font-size: 32rpx;
  font-weight: 600;
  color: #ff3b30;
}

.price-original {
  font-size: 24rpx;
  color: #8e8e93;
  text-decoration: line-through;
  margin-left: 10rpx;
}

/* 加载更多样式 */
.load-more {
  margin-top: 30rpx;
  text-align: center;
}

.loading-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-spinner {
  width: 40rpx;
  height: 40rpx;
  border: 4rpx solid #f2f2f7;
  border-top: 4rpx solid #007aff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 10rpx;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text, .load-more-btn, .all-loaded {
  font-size: 28rpx;
  color: #8e8e93;
}

.load-more-btn {
  padding: 20rpx;
  border-radius: 40rpx;
  background-color: #f2f2f7;
  display: inline-block;
}

.all-loaded {
  margin: 30rpx 0;
  text-align: center;
}

/* 移除收藏按钮相关样式 */
.favorite-btn {
  display: none; /* 隐藏收藏按钮 */
}

.list-item .favorite-btn,
.grid-item .favorite-btn {
  display: none; /* 确保在两种视图下都隐藏 */
}

.favorite-icon {
  display: none;
}

/* 补充热门标签样式，如果需要的话 */
.hot-badge {
  font-size: 20rpx;
  color: #fff;
  background-color: #ff3b30;
  padding: 4rpx 10rpx;
  border-radius: 10rpx;
  margin-left: 10rpx;
}

/* 恢复标题行样式 */
.item-title-row {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}
</style>
